<template>
  <d2-container>
    <el-card shadow="never" class="d2-mb">
      <el-form ref="eg_form" :model="eg_form" label-width="80px">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="部门名称:">
              <!-- <el-input
                placeholder="请输入内容"
                v-model="eg_form.department_name"
              >
              </el-input> -->
               <el-select v-model="eg_form.department_name" style="width:100%" clearable>
                <el-option
                  v-for="items in depart_s"
                  :key="items.id"
                  :label="items.name"
                  :value="items.name"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="策略名称:">
              <el-input
                placeholder="请输入内容"
                v-model="eg_form.strategy_name"
                clearable
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
             <el-form-item label="日期:">
              <el-date-picker
                type="date"
                v-model="eg_form.start_date"
                placeholder="开始日期"
                value-format="yyyy-MM-dd"
                clearable
              ></el-date-picker>
              -
              <el-date-picker
                type="date"
                v-model="eg_form.end_date"
                placeholder="结束日期"
                value-format="yyyy-MM-dd"
                clearable
              ></el-date-picker>
            </el-form-item>
            <el-form-item label="策略ID:" style="width:50%">
              <el-input placeholder="请输入内容" v-model="eg_form.strategy_id" clearable>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6" style="line-height: 100px;">
            <el-button size="small" @click="$router.go('-1')"
              >返回上级</el-button
            >
            <el-button size="small" @click="select_fn()">查询</el-button>
            <el-button size="small">导出</el-button>
            <el-button size="small">打印</el-button>
          </el-col>
        </el-row>
      </el-form>
      <h4 style="text-align:center">策略盈亏明细表</h4>
      <el-table
        border
        :data="tableData"
        :cell-style="{ 'text-align': 'center' }"
        :header-cell-style="{ 'text-align': 'center' }"
        style="width: 100%"
      >
        <el-table-column label="序号" type="index" width="50"></el-table-column>
        <el-table-column prop="date" label="日期"></el-table-column>
        <el-table-column
          prop="department_name"
          label="部门名称"
        ></el-table-column>
        <el-table-column prop="strategy_id" label="策略ID"></el-table-column>
        <el-table-column
          prop="strategy_name"
          label="策略名称"
        ></el-table-column>
        <el-table-column label="现货盈亏">
          <el-table-column prop="todayS" label="当日盈亏"></el-table-column>
          <el-table-column prop="diffS" label="累计盈亏"></el-table-column>
        </el-table-column>
        <el-table-column label="期货盈亏">
          <el-table-column prop="todayF" label="当日盈亏"></el-table-column>
          <el-table-column prop="diffF" label="累计盈亏"></el-table-column>
        </el-table-column>
        <el-table-column label="期权盈亏">
          <el-table-column prop="todayO" label="当日盈亏"></el-table-column>
          <el-table-column prop="diffO" label="累计盈亏"></el-table-column>
        </el-table-column>
        <el-table-column label="现货费用">
          <el-table-column prop="todayfeeS" label="当日费用"></el-table-column>
          <el-table-column prop="feeS" label="累计费用"></el-table-column>
        </el-table-column>
         <el-table-column label="衍生品费用">
          <el-table-column prop="todayfeeF" label="当日费用"></el-table-column>
          <el-table-column prop="feeF" label="累计费用"></el-table-column>
        </el-table-column>
        <el-table-column label="合计">
          <el-table-column prop="todayAll" label="当日盈亏"></el-table-column>
          <el-table-column prop="diffAll" label="累计盈亏"></el-table-column>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="eg_form.page"
          :page-size="eg_form.pageSize"
          layout="total, prev, pager, next, jumper"
          :total="eg_form.pageTotal"
        >
        </el-pagination>
      </div>
    </el-card>
  </d2-container>
</template>
<script>
import { getReport_profit_loss,getDepartments } from "@/api/url";
export default {
  data() {
    return {
       input3: '',
      select: '',
      eg_form: {
        department_name: "",
        strategy_id: "",
        strategy_name: "",
        page: 1,
        pageSize: 20,
        pageTotal: 0,
         start_date:'',
        end_date:'',
        page_type:'table'
      },
      tableData:[],
      depart_s:[],
    };
  },
  created() {
    this.select_tableData();
    getDepartments().then(res =>{
     this.depart_s= this.treeData(res.result)
    })
  },
  methods: {
     // 树形菜单扁平化方法
    treeData(tree) {
      var queen = [];
      var out = [];
      queen = queen.concat(tree);
      while (queen.length) {
        var first = queen.shift();
        if (first.sub_depart) {
          queen = queen.concat(first.sub_depart);
          delete first["sub_depart"];
        }
        out.push(first);
      }
      return out;
    },
    handleCurrentChange(val) {
      this.eg_form.page = val;
      this.select_tableData();
    },
    select_tableData() {
      getReport_profit_loss(this.eg_form).then(res => {
        this.tableData = res.result.results;
        this.eg_form.pageTotal = res.result.count;
      });
    },
    select_fn() {
      this.eg_form.page = 1;
      this.select_tableData();
    }
  }
};
</script>
<style scoped>
.el-pagination {
  text-align: center;
}
</style>
